class Grass{
     constructor(id){
      this.rootEle=document.querySelector(id)
      this.showBoxEle=this.rootEle.querySelector('.showBox')
      this.showBoxEleLi=this.rootEle.querySelector('.showBox li')
    // this.showBoxEleLi=this.rootEle.querySelector('.showBox img')
      this.boxEle=this.rootEle.querySelector('.box')
      this.smallBoxEle=this.rootEle.querySelector('.smallBox')
      this.showBoxLiEles=this.rootEle.querySelectorAll('.smallBox li')
      this.bigBoxEle=this.rootEle.querySelector('.bigBox')
      this.bigBoxImgEle=this.rootEle.querySelector('.bigBox img')
     }
     /* 
        box           bigbox
        ----     =    ------
        showbox       bigimg
        初始化图形
     */
     inist(){
         this.bigBoxImgEle.style.width=this.showBoxEle.clientWidth*this.bigBoxEle.clientWidth/this.boxEle.clientWidth+'px'
         console.log( this.bigBoxImgEle.style.width);
         this.bigBoxImgEle.style.height=this.showBoxEle.clientHeight*this.bigBoxEle.clientHeight/this.boxEle.clientHeight+'px'
     }
     /* 
     遮罩层随光标移动
     */
     onBoxMove(){
         let that=this
         this.showBoxEle.addEventListener('mousemove',function (e) {
             let x=e.offsetX
             let y=e.offsetY
             
            //  console.log(this.showBoxEle.style.width);
             x=x-that.boxEle.clientWidth/2
             y=y-that.boxEle.clientWidth/2
             if (x<0) {
                 x=0
                 
            }
            if (y<0) {
                 y=0
                 
            }
            if (x>this.clientWidth-that.boxEle.clientWidth) {
                x=this.clientWidth-that.boxEle.clientWidth
                
           }
           if (y> this.clientHeight-that.boxEle.clientHeight) {
               y=this.clientHeight-that.boxEle.clientHeight
               
           }
            that.boxEle.style.left=x+'px'
             that.boxEle.style.top=y+'px'
            /*
               x       showbox  
              ----- =  --------
              moex      bigimg
            
            */
        //    that.inist()
        //    console.log();
           let movex=x*that.bigBoxImgEle.clientWidth/that.showBoxEle.clientWidth
           let movey=y*that.bigBoxImgEle.clientHeight/that.showBoxEle.clientHeight
             that.bigBoxImgEle.style.left=-movex+'px'
             that.bigBoxImgEle.style.top=-movey+'px' 
         })
     }
     clear(){
         for (let i = 0; i < this.showBoxLiEles.length; i++) {
              this.showBoxLiEles[i].classList.remove('active')
            
             
         }
         
     }
     onTag(){
         let that=this
          for (let i = 0; i < this.showBoxLiEles.length; i++) {
             this.showBoxLiEles[i].addEventListener('click',function () {
                // that.showBoxEleLi.setAttribute('src',`./image/show_${i+1}.jpg`)
				// that.bigBoxImgEle.setAttribute('src',`./image/big_${i+1}.jpg`)
                console.log(that.showBoxEleLi);
                that.showBoxEleLi.innerHTML=`<img   src='./image/show_${i+1}.jpg' />`
                 that.bigBoxEle.innerHTML=`<img   src='./image/big_${i+1}.jpg' />`
                 that.bigBoxImgEle=that.rootEle.querySelector('.bigBox img')
                 that.bigBoxImgEle.style.position='absloute'
                    //  console.log(that.bigBoxImgEle);
                //    that.onShowAndHide()
                //     that.onBoxMove()
                //     that.inist()
                     that.clear()
                     this.classList.add('active')
             })
              
          }
     }
     onShowAndHide(){
         
         let that=this
        this.showBoxEle.addEventListener('mouseover',function () {
           that.boxEle.style.display='block'
           that.inist()
        })
        this.showBoxEle.addEventListener('mouseout',function () {
            that.boxEle.style.display='none'
             
         })
     }

}